<template>
    <panelhander :title="router.meta.name"  :text="router.meta.describe"/>

        <el-table :data="tableData.list" style="width: 100%;">
            <el-table-column prop="id" label="id"/>
            <el-table-column prop="name" label="昵称"/>
            <el-table-column prop="permissions_id" label="所属组别">
                <template #default="scope">
                    {{permissionName(scope.row.permissions_id)}}
                </template>
            </el-table-column> 

            <el-table-column prop="mobile" label="手机号"/>

            <el-table-column prop="active" label="状态">
                <template #default="scope">
                    <el-tag :type="scope.row.active ?'success' : 'danger'">
                            {{ scope.row.active ?   '正常'  :   '异常' }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column  label="创建时间">
                <template #default="scope">
                    <el-icon><Clock/></el-icon>
                    <span> {{ scope.row.create_time }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="open(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog
            v-model="dialogFormVisavle" 
            :before-close="beforClose"
            title="添加权限"
            width="500" 
        >
            <el-form
            ref="formRef"
            label-width="100px"
            label-position="left"
            :model="form"
            :rules="ruless">
             <el-form-item label="手机号" prop="mobile">
                 <el-input  v-model="form.mobile" disabled/>
             </el-form-item>

             <el-form-item label="昵称" prop="name">
                 <el-input  v-model="form.name"/>
             </el-form-item>

             <el-form-item label="菜单权限" prop="permissions_id">
                   <el-select v-model="form.permissions_id" placeholder="请输入菜单权限" style="width:240px ;">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                   </el-select> 
             </el-form-item>
           </el-form>
             <template #footer>
               <div class="dialog-footer">
                 <el-button type="primary" @click="confirm(formRef)">确认</el-button>
               </div>
             </template>
 

  </el-dialog>
 

</template>

<script setup name="Admin" lang="ts">
import { authAdmin, menuSelectList, updateUser } from '@/medical/m-tool/m-api/Mapi';
import dayjs from 'dayjs';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
const router=useRoute()

//页面数据展示限制
const paginationData = reactive({
    pageNum:1,
    pageSize:10
})

//表单列表数据
const tableData=reactive({
    list:[],
    total:0
})

//编辑表单数据
const form=reactive({
    mobile:'',
    name:'',
    permissions_id:''
})

//账户列表数据初始化
const options = ref([])

//表单实例化
const formRef = ref()

//窗口控制显隐
const dialogFormVisavle=ref(false)

onMounted(()=>{
    getListData()
    menuSelectList().then(({data})=>{
        options.value=data.data
    })
})


//根据权限id匹配权限名称
function permissionName(id){
    const data= options.value.find(el => el.id==id)
  
    return data ? data.name : '超级管理员'
}

//请求列表数据
function getListData(){
    authAdmin(paginationData).then(({data})=>{
        console.log(data.data,'autAdmin');
        const {list,total}=data.data
        list.forEach(item => {
            item.create_time=dayjs(item.create_time).format('YYYY-MM-DD')
        });
        tableData.list=list
        tableData.total=total
        
    })

}


const ruless=reactive({
    name:[{required:true,trigger:'blur', message:'请填写昵称'}],
    permissions_id:[{required:true,trigger:'blur', message:'请输入菜单权限'}]
})

//账户弹窗编辑逻辑
function open( rowData){
    dialogFormVisavle.value=true
    console.log(rowData);
    
    Object.assign(form,{mobile: rowData.mobile, name:rowData.name,prmissons_id:rowData.permissons_id})
}


//表单提交
async function confirm( formEl){
    if(!formEl) return
    await formEl.validate((valid,fields)=>{
      if(valid){
        //获取选则的数据
        const { name,permissions_id } = form
        updateUser({name,permissions_id}).then(({data    })=>{
            if(data.code === 10000){
                dialogFormVisavle.value=false
                getListData()
            }
        })
      }else{
        console.log('error submit',fields)
      }
    })
}
function beforClose(){
    dialogFormVisavle.value=false
}
</script>

<style>

</style>